import { NavBar, Image, Tag, Grid, List, Button, Dialog } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import '../assets/style/user.scss';
import bannerImg from '../assets/imgs/mid.png';
import avatar from '../assets/imgs/tou.jpg';
export default function User() {
  const navigate = useNavigate();
  const back = () => {
    navigate(-1);
  }
  const logout = () => {
    Dialog.confirm({
      content: '确认退出?',
      onConfirm: () => {
        localStorage.removeItem('memberLoginInfo');
        navigate('/home');
      },
    })

  }
  return (
    <div className='user-container'>
      <NavBar className="page-header" onBack={back}>
        <strong>会员中心</strong>
      </NavBar>
      <div className='user-wrap'>
        <div className="user-info">
          <div className="user-profile">
            <Image className='avatar' src={avatar} style={{ borderRadius: '50%' }}></Image>
            <div className="nickname">张三</div>
            <Tag round color='#FFD5CC' className="signin">每日签到</Tag>
          </div>

          {/* 用户数据统计 */}
          <Grid className='data-count' columns={4} gap={10}>
            <Grid.Item>
              <p>12</p>
              <p>我的收藏</p>
            </Grid.Item>
            <Grid.Item>
              <p>12</p>
              <p>浏览记录</p>
            </Grid.Item>
            <Grid.Item>
              <p>12</p>
              <p>红包</p>
            </Grid.Item>
            <Grid.Item onClick={() => navigate('/coupon')}>
              <p>12</p>
              <p>优惠券</p>
            </Grid.Item>
          </Grid>


          {/* 订单导航 */}
          <div className="order-nav">
            <h3>
              我的订单
              <span>全部订单&nbsp;&gt;</span>
            </h3>
            <Grid className='grid' columns={4} gap={10}>
              <Grid.Item>
                <Image className='icon' src="icons/payment.png" fit='fill'></Image>
                待付款
              </Grid.Item>
              <Grid.Item>
                <Image className='icon' src="icons/delivery.png" fit='fill'></Image>

                待发货</Grid.Item>
              <Grid.Item>
                <Image className='icon' src="icons/evaluation.png" fit='fill'></Image>

                已发货</Grid.Item>
              <Grid.Item>
                <Image className='icon' src="icons/service.png" fit='fill'></Image>

                待评价</Grid.Item>

            </Grid>
          </div>


        </div>
      </div>

      {/* 轮播图 */}
      <Image style={{ height: 120 }} src={bannerImg} fit="fill" />


      {/* 导航列表 */}
      <List style={{ marginTop: 10 }}>
        <List.Item prefix={<Image className='icon' src="icons/small/address.png" fit='fill' />} onClick={() => { }}>地址管理</List.Item>
        <List.Item prefix={<Image className='icon' src="icons/small/wallet.png" fit='fill' />} onClick={() => { }}>我的钱包</List.Item>
        <List.Item prefix={<Image className='icon' src="icons/small/qrcode.png" fit='fill' />} onClick={() => { }}>我的二维码</List.Item>
        <List.Item prefix={<Image className='icon' src="icons/small/partner.png" fit='fill' />} onClick={() => { }}>我的小伙伴</List.Item>
        <List.Item prefix={<Image className='icon' src="icons/small/free.png" fit='fill' />} onClick={() => { }}>0元使用</List.Item>
      </List>

      <div style={{ margin: 10 }}>
        <Button onClick={logout} block color="primary" size="large">安全退出</Button>
      </div>
    </div>
  )
}
